<!--跑马灯-->

<template>
  <div class="w-h-full">
    <MarqueeText :duration="component.compConfigData.duration"
                 :repeat="component.compConfigData.repeat"
                 :paused="component.compConfigData.paused">
      <span :style="{
        color: component.compConfigData.color,
        fontSize: component.compConfigData.fontSize + 'px',
        textShadow: '0px 0px ' + component.compConfigData.textShadowBlur + 'px ' + component.compConfigData.textShadowColor
      }">
        {{runCustomFilter(component.compConfigData.ds_resultObj)[0].value}}
      </span>
    </MarqueeText>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  import MarqueeText from "./MarqueeText";

  const _this = {
    name: 'MarqueeComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    components: {
      MarqueeText
    },
    attr: {
      version: '2.0',
      configDataTemp: Object.assign({

        duration: 10,
        repeat: 2,
        paused: false,

        color: '#fff',
        fontSize: 14,

        textShadowBlur: 5,
        textShadowColor: '#2196f3'

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'value',
            remark: '内容'
          }
        ],
        ds_resultObj: [
          {
            "value": "我是一段跑马灯引用的长文本内容，感谢您的使用与支持！"
          }
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration())
    },
    data() {
      return {}
    },
    mounted() {
      this.init();

    },
    methods: {
      init() { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      }
    },
    computed: {}
  };

  export default _this
</script>

<style scoped>

</style>
